/* 整体页面样式 */
body {
  font-family: "Arial", sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120vh;
}


/* 超链接样式 */
.link-route-div a {
  text-decoration: underline;
  color: #3366cc;
}

.link-route-div a:hover {
  text-decoration: underline;
}

/* 提示文字样式 */
.hint-div {
  margin-top: 1vw;
  text-align: center;
}

.hint-word {
  font-style: italic;
  color: #cc6161;
  font-size: 1rem;
}

/* 表单样式 */

.link-route-div,
.btn-submit-note {
  text-align: center;
}

.link-route-div {
  margin: 0 0;
}

/* 移除li元素前的圆点 */
li {
  list-style-type: none;
}

/* ****** */
.link-container {
  display: flex;
  justify-content: space-between;
}

.link-back-div {
  display: flex;
  justify-content: space-between;
  /* 确保两个 li 元素之间有空隙 */
}

.li-link-item {
  /* 如果你不希望它们之间有任何空隙，可以删除下面的样式 */
  margin-right: 0px 1vw;
  /* 或其他合适的值，根据需要调整 */
}

.exploed-user-name-class {
  font-family: Arial;
  margin: 0 0 0 2em;
}

#exploed-user-name-id {
  color: #1b9c1d;
  text-decoration: none;
}

/*  */

.form-div {
  width: 90%;
  max-width: 90%;
  margin: 1vw auto;
  background-color: #d6e4f3;
  padding: 2vw;
  border-radius: 1vw;
  box-shadow: 0 1vw 1vw rgba(0, 0, 0, 0.1);
}

.compose-div {
  display: flex;
  align-items: center;
  margin-bottom: 1vw;
}

.label-for-input {
  display: inline-block;
  width: 4vw;
  color: #333;
  font-weight: bold;
  margin-right: 0.1vw;
}

.input-area,
textarea {
  width: 100%;
  padding: 1rem;
  border: 0.1vw solid #ccc;
  border-radius: 1vw;
  outline: none;
  resize: vertical;
}

.input-area:focus,
textarea:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn-submit-note {
  text-align: center;
}

input[type="button"] {
  background-color: #007bff;
  color: white;
  padding: 1vw 2vw;
  border: none;
  border-radius: 1vw;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.3s ease;
}

input[type="button"]:hover {
  background-color: #0056b3;
}


.comprise-input,
.complicated-div {
  width: 90%;
}

/*  */

.include-large-div {
  width: 90%;
}

.there-div {
  position: relative;
  bottom: 3vw;
}